<template>
    <a-modal v-model="visible" :title="title" @ok="onSubmit" @cancel="handleCancel" width="40%"
        :dialog-style="{ top: '20px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <template v-for="(item, index) in formList">
                <a-form-model-item :ref="item.prop" :label="item.label" :prop="item.prop" :key="index"
                    v-if="item.type === 'text'">
                    <a-input :disabled="isDisabled" :placeholder="'请输入' + item.label" v-model:value="form[item.prop]"
                        :suffix="item.suffix" />
                </a-form-model-item>
                <a-form-model-item :ref="item.prop" :label="item.label" :prop="item.prop" :key="index"
                    v-if="item.type === 'number'">
                    <a-input-number :disabled="isDisabled" style="width: 100%;" :placeholder="'请输入' + item.label"
                        :max="item.max" :min="item.min" v-model:value="form[item.prop]"
                        :formatter="value => `${value}${item.suffix}`"
                        :parser="value => value.replace(`${item.suffix}`, '')" />
                </a-form-model-item>
                <a-form-model-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'select'">
                    <a-select :disabled="isDisabled" v-model="form[item.prop]" :placeholder="'请选择' + item.label">
                        <a-select-option v-for="(option, optIndex) in item.options" :key="optIndex"
                            :value="option[item.value]">
                            {{ option[item.field] }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="item.label" :prop="item.prop" :key="index"
                    v-if="item.type === 'date-picker'">
                    <a-date-picker :disabled="isDisabled" :locale="locale" show-time :placeholder="'请选择' + item.label"
                        v-model:value="form[item.prop]" :format="item.format"
                        @ok="pickerOk(item.type, index, item.prop, $event)" />
                </a-form-model-item>
                <a-form-model-item :label="item.label" :prop="item.prop" :key="index"
                    v-if="item.type === 'range-picker'">
                    <a-range-picker :disabled="isDisabled" :locale="locale" :show-time="{ format: item.format }"
                        :format="item.format" v-model:value="form[item.prop]" :placeholder="['开始日期', '结束日期']"
                        @ok="pickerOk(item.type, index, item.prop, $event)" />
                </a-form-model-item>
                <a-form-model-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'cascader'">
                    <el-cascader :disabled="isDisabled" v-model="form[item.prop]" :options="item.options"
                        :show-all-levels="false" :props="customProps"></el-cascader>
                </a-form-model-item>
                <a-form-model-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'switch'">
                    <a-switch :disabled="isDisabled" default-checked v-model="form[item.prop]" />
                </a-form-model-item>
                <a-form-model-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'radio'">
                    <a-radio-group :disabled="isDisabled" v-model="form[item.prop]">
                        <a-radio :value="_item[item.value]" v-for="(_item, index) in item.options" :key="index">
                            {{ _item[item.field] }}
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'checkbox'">
                    <a-checkbox-group v-model="form[item.prop]" :disabled="isDisabled">
                        <a-checkbox :value="_item[item.value]" v-for="(_item, _index) in item.options" :key="_index">
                            {{ _item[item.field] }}
                        </a-checkbox>
                    </a-checkbox-group>
                </a-form-model-item>
            </template>
        </a-form-model>
        <template slot="footer">
            <a-button key="back" @click="handleCancel">
                取消
            </a-button>
            <a-button key="submit" type="primary" @click="onSubmit">
                确定
            </a-button>
        </template>
    </a-modal>
</template>

<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment from 'moment';
export default {
    data() {
        return {
            value: [],
            locale,
            title: '添加信息',
            visible: true,
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            form: {},
            rules: {},
            customProps: {
                multiple: false, // 启用多选
                emitPath: false, // 只返回该节点的值
                //value: "uuid", // 自定义当前数组的键名 - value
                //label: "name", // 自定义当前数组的键名 - label
                //children: "children", // 自定义当前数组的键名 - children
                expandTrigger: "click", // 次级菜单的展开方式 - click/hover
            },
        };
    },
    props: {
        formData: { type: Object, default: () => { } },
        formList: { type: Array, default: () => [] },
        isDisabled: { type: Boolean, default: false },
    },
    mounted() {
        this.initializeForm();
    },
    methods: {
        initializeForm() {
            if (this.isDisabled) {
                this.title = '查看信息';
            } else if (this.formData && this.formData.id) {
                this.title = '编辑信息';
                this.form = { ...this.formData };
            } else {
                this.title = '添加信息';
            }
            this.generateRules();
        },
        generateRules() {
            this.formList.forEach((item) => {
                if (item.rules) {
                    if (item.type === 'select' || item.type === 'cascader' || item.type === 'radio' || item.type === 'switch' || item.type === 'checkbox') {
                        this.rules[item.prop] = [{ required: true, message: `请选择${item.label}`, trigger: 'change' }];
                    } else {
                        this.rules[item.prop] = [{ required: true, message: `请输入${item.label}`, trigger: 'blur' }];
                    }
                }
            });
        },
        pickerOk(type, index, prop, val) {
            const item = this.formList[index];
            const format = item.format || 'YYYY-MM-DD HH:mm:ss';
            if (type === 'date-picker') {
                this.form[prop] = val ? moment(val).format(format) : null;
            } else if (type === 'range-picker') {
                this.form[prop] = val ? val.map(item => moment(item).format(format)) : [];
            }
        },
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (this.isDisabled) {
                    this.handleCancel();
                } else {
                    if (valid) {
                        this.handleOk();
                    } else {
                        return false;
                    }
                };

            });
        },
        handleOk() {
            this.$emit('ok', this.form);
            this.visible = false;
        },
        handleCancel() {
            this.$emit('ok');
            this.visible = false;
        },
    },
};
</script>

<style lang="less" scoped>
.disabled {
    pointer-events: none;
    opacity: 0.6;
}
</style>